<template>
  <div class="home">
    <HelloWorld3/>
    <div class="banner"> <img src="../assets/banner3.jpg" alt=""></div>
    <!-- neirong -->
    <div class="main">
      <div class="main_left">
        <p>旅游攻略导航</p>
        <div class="main_left_top">
          <p @click="show1">国内<img src="../assets/jiao.png" alt=""></p>
          <p @click="show2">国外<img src="../assets/jiao.png" alt=""></p>
          <p @click="show3">主题<img src="../assets/jiao.png" alt=""></p>
        </div>
        <!-- 国内 -->
        <div class="ranking" v-show="yes1">
          <p><span>1、</span>大理<img src="../assets/one.png" alt=""></p>
          <p><span>2、</span>云南<img src="../assets/two.png" alt=""></p>
          <p><span>3、</span>烟台<img src="../assets/three.png" alt=""></p>
          <p><span>4、</span>莱芜</p>
          <p><span>5、</span>青岛</p>
          <p><span>6、</span>洱海</p>
        </div>
        <!-- 国外 -->
        <div class="ranking" v-show="yes2">
          <p><span>1、</span>法国巴黎<img src="../assets/one.png" alt=""></p>
          <p><span>2、</span>马来西亚<img src="../assets/two.png" alt=""></p>
          <p><span>3、</span>马尔代夫<img src="../assets/three.png" alt=""></p>
          <p><span>4、</span>青青草原</p>
          <p><span>5、</span>羚羊峡谷</p>
          <p><span>6、</span>圣母之都</p>
        </div>
        <!-- 主题 -->
        <div class="ranking" v-show="yes3">
          <p><span>1、</span>法国巴黎<img src="../assets/one.png" alt=""></p>
          <p><span>2、</span>马来西亚<img src="../assets/two.png" alt=""></p>
          <p><span>3、</span>马尔代夫<img src="../assets/three.png" alt=""></p>
          <p><span>4、</span>青青草原</p>
          <p><span>5、</span>羚羊峡谷</p>
          <p><span>6、</span>圣母之都</p>
        </div>
        <div class="main_left_input"><input type="text" placeholder="输入想去的目的地"></div>
      </div>
      <div class="main_right">
        <h1>推荐攻略</h1>
        <!-- 1 -->
        <router-link to="/detail2">
          <div class="main2_three">
            <div class="main2_three_left">
              <div class="main2_three_left_top"><p><img src="../assets/book.png" alt="">来自<span>小胖丁</span>的分享</p></div>
              <img src="../assets/03.jpg">
            </div>
            <div class="main2_three_right">
              <h1>青海三日游</h1>
              <div class="main2_three_right_p">
                <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
              </div>
              <div class="main2_three_right_bottom">
                <div class="main2_three_right_bottom_left"><p>￥998</p></div>
                <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p><img src="../assets/infor.png" alt=""><p>2256</p></div>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 1结束 -->
        <!-- 2开始 -->
        <router-link to="/detail2">
          <div class="main2_three">
            <div class="main2_three_left">
              <div class="main2_three_left_top"><p><img src="../assets/book.png" alt="">来自<span>小胖丁</span>的分享</p></div>
              <img src="../assets/03.jpg">
            </div>
            <div class="main2_three_right">
              <h1>三亚三日游</h1>
              <div class="main2_three_right_p">
                <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
              </div>
              <div class="main2_three_right_bottom">
                <div class="main2_three_right_bottom_left"><p>￥998</p></div>
                <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p><img src="../assets/infor.png" alt=""><p>2256</p></div>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 2结束 -->
        <!-- 3开始 -->
        <router-link to="/detail2">
          <div class="main2_three">
            <div class="main2_three_left">
              <div class="main2_three_left_top"><p><img src="../assets/book.png" alt="">来自<span>小胖丁</span>的分享</p></div>
              <img src="../assets/03.jpg">
            </div>
            <div class="main2_three_right">
              <h1>埃及三日游</h1>
              <div class="main2_three_right_p">
                <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
              </div>
              <div class="main2_three_right_bottom">
                <div class="main2_three_right_bottom_left"><p>￥998</p></div>
                <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p><img src="../assets/infor.png" alt=""><p>2256</p></div>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 3结束 -->
        <!-- 4开始 -->
        <router-link to="/detail2">
          <div class="main2_three">
            <div class="main2_three_left">
              <div class="main2_three_left_top"><p><img src="../assets/book.png" alt="">来自<span>小胖丁</span>的分享</p></div>
              <img src="../assets/03.jpg">
            </div>
            <div class="main2_three_right">
              <h1>最忆是金陵</h1>
              <div class="main2_three_right_p">
                <p>烟台，山东省辖地级市，国务院批复确定的中国山东半岛的中心城市、环渤海地区重要的港口城市和国家历史文化名城。 [1]  截至2020年6月，全市下辖5个区，代管6个县级市。总面积13864.5平方公里 [2]  。根据第七次人口普查数据，截至2020年11月1日零时，烟台市常住人口为7102116人， [106]  [113]  城镇人口466.97万人，城镇化率65.42%。 [3-4]  烟台地处中国华东地区、山东半岛东北部，位于东经119°34′—121°57′，北纬36°16′—38°23′之间，东连威海，西接潍坊、青岛，南邻黄海，北濒渤海，与辽东半岛对峙，与大连隔海相望，海岸线长909千米，濒临渤海、黄海，有岛屿63个 [5]  ，是环渤海经济圈、胶东经济圈内重要节点城市、中国首批14个沿海开放城市之一，中国海滨城市，“一带一路”国家战略重点建设港口城市。</p>
              </div>
              <div class="main2_three_right_bottom">
                <div class="main2_three_right_bottom_left"><p>￥998</p></div>
                <div class="main2_three_right_bottom_right"><img src="../assets/eye.png" alt=""><p>2256</p><img src="../assets/infor.png" alt=""><p>2256</p></div>
              </div>
            </div>
          </div>
        </router-link>
        <!-- 4结束 -->
        <!-- line -->
        <div class="line"></div>
        <!-- more -->
        <div class="more">加载更多</div>
      </div>
    </div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
  data(){
    return{
      yes1:true,
      yes2:false,
      yes3:false,
    }
  },
  methods:{
    show1:function(){
   
      this.yes1=true
      this.yes2=false
      this.yes3=false
     
    },
    show2:function(){
      this.yes1=false
      this.yes2=true
      this.yes3=false
      
    },
     show3:function(){
      this.yes1=false
      this.yes2=false
      this.yes3=true
      
    },}
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.banner{width: 100%;img{width: 100%;}}
.main{width: 80%;margin: 50px auto;display: flex;flex-direction: row;justify-content: space-between;}
.main_left{width: 28%;}
.main_right{width: 70%;}
.main_right a{text-decoration: none;color: black;}
.main_left p{font-size: 26px;}
.main_left_top{display: flex;flex-direction: row;justify-content:space-between;border-top: 2px solid gray;border-bottom: 2px solid gray;line-height: 40px;font-size: 24px;margin: 30px 0;width: 80%;}

.main_left_top p{&:first-child,&:hover{color: #ff7b15;}}
.main_left_top{img{width: 10px;height: 10px;margin: 0 5px;}}
.ranking{width: 80%;line-height: 50px;p{padding-left: 20px;}span{color: #ff7b15;}img{width: 30px;margin: 0 20px;}}
.main_left_input{width: 100%;input{width: calc(100% - 30px);padding: 15px;background-image: url(../assets/search.png);background-position: 98% center;background-size: 40px;background-repeat: no-repeat;font-size: 20px;border: 1px solid #808080;}margin: 30px 0;}
.main2_three{width: 100%;margin:40px auto;display: flex;flex-direction: row;background-color: #ecf6ff;}
.main2_three_left{width: calc(30% - 40px);img{width: 100%;}padding: 20px;}
.main2_three_left_top{img{width: 20px;padding:0px 10px}span{color: #ff7b15;}font-size: 20px;line-height: 50px;}
.main_right{h1{font-weight: normal;font-size: 35px;margin-top: 10px;}}
.main2_three_right{width: calc(70% - 40px);padding: 20px;
h1{margin: 20px 0;text-align: center;}}
.main2_three_right_p{height: auto;font-size: 16px;line-height: 25px;overflow:hidden;text-overflow: ellipsis;margin: 20px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  width: 100%;}
.main2_three_right_bottom{display: flex;flex-direction: row;justify-content: space-between;color:  #b3b9bf;}
.main2_three_right_bottom_left{color: #ff7b15;font-size: 30px;}
.main2_three_right_bottom_right {margin: 0px 0;img{width: 30px;}line-height: 40px;display: flex;flex-direction: row;p{margin: 0 10px;}}
.line{width: 100%;background-color: #b5b5b5;height: 2px;}
.more{width: 100%;background-color: #fff5e5;text-align: center;font-size: 20px;padding: 10px 0;margin:20px 0}
</style>